import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Rows } from '../../models/Rows';
import { Cols } from '../../models/Cols';
import { Table } from '../../models/Table';
import { FormShowPage} from '../../pages/form-show/form-show';
import {Http} from '@angular/http';
import { Const } from '../../models/Const';

@IonicPage()
@Component({
  selector: 'page-form-add',
  templateUrl: 'form-add.html',
})
export class FormAddPage {
  @ViewChild("notice") public noticeNode:ElementRef;
  @ViewChild("fields") public fieldsNode:ElementRef;
  @ViewChild("formAttr") public formAttr:ElementRef;
  @ViewChild("rowAttr") public rowAttr:ElementRef;
  @ViewChild("colAttr") public colAttr:ElementRef;

  @ViewChild("addTableContainer") public addTableContainer:ElementRef;
  parentTable:Table = new Table('','','',[]);
  tablesList:Array<Table> = new Array<Table>();
  currentTable:Table = new Table('','','',[]);
  currentTableElement:any;

  addingTable:number = 0;
  finishAddTable:number = 1;

  isNoticeHide=0;
  isFormAttrHide =0;
  isRowAttrHide = 1;
  isColAttrHide =1;

  currentRowElement:any;
  currentRow:Rows;
  currentColElement:any;
  currentCol:Cols;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private render2: Renderer2,
    public http:Http
  ) {}
  showFormAttr(){
    this.isFormAttrHide = 0;
    this.isColAttrHide = 1;
    this.isRowAttrHide = 1;
  }
  showRowAttr(){
    this.isFormAttrHide = 1;
    this.isColAttrHide = 1;
    this.isRowAttrHide = 0;
  }
  showColAttr(){
    this.isFormAttrHide = 1;
    this.isRowAttrHide = 1;
    this.isColAttrHide= 0;
  }

  addRow(){
    let rowCount = this.currentTable.rows.length;
    let rowElement= this.render2.createElement("div");
    this.render2.setAttribute(rowElement,"class","row");
    this.render2.setAttribute(rowElement,"id","row"+rowCount);
    this.render2.setAttribute(rowElement,"row",rowCount+'');
    this.render2.setAttribute(rowElement,"col",'0');
    this.render2.setAttribute(rowElement,"table",this.addingTable+'');
    this.render2.listen(rowElement,"click",()=>{
      this.showRowInfo(event,rowElement);
    });
    if(this.currentTableElement){
      this.render2.appendChild(this.currentTableElement,rowElement);
    }else{
      this.render2.appendChild(this.fieldsNode.nativeElement,rowElement);
    }
    this.currentRowElement = rowElement;
    
    let row = new Rows(rowCount,0,new Array(),new Array());
    row.colCount = 0;
    this.currentTable.rows.push(row);
    this.currentRow = row;
    if(this.isNoticeHide==0){
      this.isNoticeHide = 1;
    }
  }

  showRowInfo(event,rowElement:any){
    this.showRowAttr();
    event.stopPropagation();
    let table = parseInt((<HTMLElement> event.target).getAttribute("table"));
    let row =parseInt((<HTMLElement> event.target).getAttribute("row"));
    this.currentRowElement = rowElement;

    if(this.tablesList.length>0&&table!=this.tablesList.length){
      this.currentTable = this.tablesList[table];
    }
    this.currentRow = this.currentTable.rows[row];
    this.addingTable = table;
  }


showColInfo(event,colElement){
  this.showColAttr();
  event.stopPropagation();
  if(this.currentColElement){
    this.render2.removeClass(this.currentColElement,"current");
  }
  
  this.currentColElement = colElement;
  this.render2.addClass(this.currentColElement,"current");
  let tableNum = parseInt((<HTMLElement> colElement).getAttribute("table"));
  let rowNum = parseInt((<HTMLElement> colElement).getAttribute("row"));
  let colNum = parseInt((<HTMLElement> colElement).getAttribute("col"));

  if(tableNum!=this.tablesList.length){
    this.currentRow = this.tablesList[tableNum].rows[rowNum];
  }else{
    this.currentRow = this.currentTable.rows[rowNum];
  }
  
  this.currentCol = this.currentRow.cols[colNum];

  this.currentRowElement = this.render2.parentNode(this.currentColElement);
  if(this.tablesList.length>0){
    this.currentTable = this.tablesList[tableNum];
  }
  
}

addTable(){
  var labelText = '完成添加关联表';
  
  if(this.finishAddTable == 1){
    //新增内嵌表，记录现场
    this.addRow();
    
    this.currentTable.addTime = new Date();
    if(this.addingTable == 0){
      this.parentTable = this.currentTable;
    }
    let newTable = new Table('','','',[]);
    this.currentRow.tables.push(newTable);
    this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    this.tablesList.push(this.currentTable);
    this.addingTable = this.tablesList.length;
    
    let tableElement= this.render2.createElement("div");
    this.render2.setAttribute(tableElement,"class","table");
    this.render2.setAttribute(tableElement,"table",this.tablesList.length+'');
    this.render2.listen(tableElement,"click",()=>{
      this.showFormInfo(event,tableElement);
    });
    this.finishAddTable = 0;
    this.currentTableElement = tableElement;
    this.render2.appendChild(this.currentRowElement,tableElement);
    this.currentRowElement= null;
    this.currentTable = new Table('','','',[]);
    this.tablesList.push(this.currentTable);
  }else{
    this.finishAddTable=1;
  
    //还原现场
    this.currentTable.addTime = new Date();
    this.parentTable.rows[this.parentTable.rows.length-1].tables[this.parentTable.rows[this.parentTable.rows.length-1].tables.length-1]= this.currentTable;
    this.tablesList[this.tablesList.length-1]= this.currentTable;
    this.currentTable = this.parentTable;
    this.currentTableElement = null;
    this.currentRowElement = null;
    labelText = '添加关联表';
    this.addingTable = 0;
  }
  let span =  this.render2.createElement("span");
  this.render2.setAttribute(span,"class","btn-field");
  this.render2.addClass(span,"fieldName");
  let text = this.render2.createText(labelText);
  this.render2.appendChild(span,text);
  let oldspan = this.addTableContainer.nativeElement.querySelector("span");
  this.render2.removeChild(this.addTableContainer.nativeElement,oldspan);
  this.render2.appendChild(this.addTableContainer.nativeElement,span);

}
showFormInfo(event,formElement){
  this.showFormAttr();
  event.stopPropagation();
  this.currentTableElement = formElement;
  let tableNum = parseInt((<HTMLElement> formElement).getAttribute("table"));

  this.currentTable = this.tablesList[tableNum];
}
setText(){
  let span =  this.render2.createElement("span");
  this.render2.addClass(span,"fieldName");
  let text = this.render2.createText(this.currentCol.label+'：');
  this.render2.appendChild(span,text);
  let oldSpan = this.currentColElement.querySelector('.fieldName');
  this.render2.insertBefore(this.currentColElement,span,oldSpan);
  this.render2.removeChild(this.currentColElement,oldSpan);
}

saveRow(){
  this.render2.setStyle(this.currentRowElement,"height",this.currentRow.lineHeight+"px");
  this.render2.setAttribute(this.currentRowElement,"h",''+this.currentRow.lineHeight);
}

saveCol(){
  console.log(this.currentCol);
  this.render2.setStyle(this.currentColElement,"width",(this.currentCol.spacePercent/12*100)+"%");
  let span =  this.render2.createElement("span");
  this.render2.addClass(span,"fieldName");
  let text = this.render2.createText(this.currentCol.label+'：');
  this.render2.appendChild(span,text);
  let oldSpan = this.currentColElement.querySelector('.fieldName');
  this.render2.insertBefore(this.currentColElement,span,oldSpan);
  this.render2.removeChild(this.currentColElement,oldSpan);
}
 
  ionViewDidLoad() {
    
  }
  getJson(){
    this.navCtrl.push(FormShowPage,{"table":this.parentTable});
    console.log(this.parentTable);
  }

  saveJson(){
    if(this.tablesList.length>1){
      if(this.addingTable!=0){
        alert('请先完成添加关联表单');
        return;
      }
    }else{
      this.parentTable = this.currentTable;
    }
    let url = Const.serverUrl+'project/form';
    this.http.post(url,this.parentTable).subscribe(
      function(res){
        if(res.json().msg=='success'){
          alert('保存成功');
        }
      }
    );

  }
 /**添加字段组件 */

  //单行文本
  addText(){
    if(this.currentRowElement){
      this.currentCol = new Cols("input");
      let colElement = this.render2.createElement("div");
      this.render2.addClass(colElement,"cols");
      this.render2.setAttribute(colElement,"table",''+this.addingTable);
      this.render2.setAttribute(colElement,"row",''+this.currentRow.rowNum);
      this.render2.setAttribute(colElement,"col",""+(this.currentRow.colCount));
      let span =  this.render2.createElement("span");
      this.render2.addClass(span,"fieldName");
      let text = this.render2.createText(this.currentCol.label+'：');
      this.render2.appendChild(span,text);
      let input = this.render2.createElement('input');
      this.render2.setAttribute(input,"type","text");
      this.render2.setAttribute(input,"placeholder",this.currentCol.comment);
      this.render2.appendChild(colElement,span);
      this.render2.appendChild(colElement,input);
      this.render2.listen(colElement,"click",($event)=>{
        this.showColInfo(event,colElement);
      });
      this.render2.appendChild(this.currentRowElement,colElement);
      this.currentRow.colCount++;
      this.currentRow.cols.push(this.currentCol);
      this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    }else{
      this.addRow();
      this.addText();
    }
  } 

  //数字
  addNumber(){
    if(this.currentRowElement){
      this.currentCol = new Cols("number");
      let colElement = this.render2.createElement("div");
      this.render2.addClass(colElement,"cols");
      this.render2.setAttribute(colElement,"table",''+this.addingTable);
      this.render2.setAttribute(colElement,"row",''+this.currentRow.rowNum);
      this.render2.setAttribute(colElement,"col",""+(this.currentRow.colCount));
      let span =  this.render2.createElement("span");
      this.render2.addClass(span,"fieldName");
      let text = this.render2.createText(this.currentCol.label+'：');
      this.render2.appendChild(span,text);
      let input = this.render2.createElement('input');
      this.render2.setAttribute(input,"type","number");
      this.render2.setAttribute(input,"placeholder",this.currentCol.comment);
      this.render2.appendChild(colElement,span);
      this.render2.appendChild(colElement,input);
      this.render2.listen(colElement,"click",($event)=>{
        this.showColInfo(event,colElement);
      });
      this.render2.appendChild(this.currentRowElement,colElement);
      this.currentRow.colCount++;
      this.currentRow.cols.push(this.currentCol);
      this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    }else{
      this.addRow();
      this.addNumber();
    }
  } 
  //多选框
  addCheckbox(){
    if(this.currentRowElement){
      this.currentCol = new Cols("checkbox");
      let colElement = this.render2.createElement("div");
      this.render2.addClass(colElement,"cols");
      this.render2.setAttribute(colElement,"table",''+this.addingTable);
      this.render2.setAttribute(colElement,"row",''+this.currentRow.rowNum);
      this.render2.setAttribute(colElement,"col",""+(this.currentRow.colCount));
      let span =  this.render2.createElement("span");
      this.render2.addClass(span,"fieldName");
      let text = this.render2.createText(this.currentCol.label+'：');
      this.render2.appendChild(span,text);
      let input = this.render2.createElement('input');
      this.render2.setAttribute(input,"type","checkbox");
      this.render2.setAttribute(input,"placeholder",this.currentCol.comment);
      this.render2.appendChild(colElement,span);
      this.render2.appendChild(colElement,input);
      this.render2.listen(colElement,"click",($event)=>{
        this.showColInfo(event,colElement);
      });
      this.render2.appendChild(this.currentRowElement,colElement);
      this.currentRow.colCount++;
      this.currentRow.cols.push(this.currentCol);
      this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    }else{
      this.addRow();
      this.addCheckbox();
    }
  } 
  //单选框
  addRadio(){
    if(this.currentRowElement){
      this.currentCol = new Cols("radio");
      let colElement = this.render2.createElement("div");
      this.render2.addClass(colElement,"cols");
      this.render2.setAttribute(colElement,"table",''+this.addingTable);
      this.render2.setAttribute(colElement,"row",''+this.currentRow.rowNum);
      this.render2.setAttribute(colElement,"col",""+(this.currentRow.colCount));
      let span =  this.render2.createElement("span");
      this.render2.addClass(span,"fieldName");
      let text = this.render2.createText(this.currentCol.label+'：');
      this.render2.appendChild(span,text);
      let input = this.render2.createElement('input');
      this.render2.setAttribute(input,"type","radio");
      this.render2.setAttribute(input,"placeholder",this.currentCol.comment);
      this.render2.appendChild(colElement,span);
      this.render2.appendChild(colElement,input);
      this.render2.listen(colElement,"click",($event)=>{
        this.showColInfo(event,colElement);
      });
      this.render2.appendChild(this.currentRowElement,colElement);
      this.currentRow.colCount++;
      this.currentRow.cols.push(this.currentCol);
      this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    }else{
      this.addRow();
      this.addRadio();
    }
  } 
  //日期
  addDate(){
    if(this.currentRowElement){
      this.currentCol = new Cols("date");
      let colElement = this.render2.createElement("div");
      this.render2.addClass(colElement,"cols");
      this.render2.setAttribute(colElement,"table",''+this.addingTable);
      this.render2.setAttribute(colElement,"row",''+this.currentRow.rowNum);
      this.render2.setAttribute(colElement,"col",""+(this.currentRow.colCount));
      let span =  this.render2.createElement("span");
      this.render2.addClass(span,"fieldName");
      let text = this.render2.createText(this.currentCol.label+'：');
      this.render2.appendChild(span,text);
      let input = this.render2.createElement('input');
      this.render2.setAttribute(input,"type","date");
      this.render2.setAttribute(input,"placeholder",this.currentCol.comment);
      this.render2.appendChild(colElement,span);
      this.render2.appendChild(colElement,input);
      this.render2.listen(colElement,"click",($event)=>{
        this.showColInfo(event,colElement);
      });
      this.render2.appendChild(this.currentRowElement,colElement);
      this.currentRow.colCount++;
      this.currentRow.cols.push(this.currentCol);
      this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    }else{
      this.addRow();
      this.addDate();
    }
  } 
  //时间
  addTime(){
    if(this.currentRowElement){
      this.currentCol = new Cols("datetime");
      let colElement = this.render2.createElement("div");
      this.render2.addClass(colElement,"cols");
      this.render2.setAttribute(colElement,"table",''+this.addingTable);
      this.render2.setAttribute(colElement,"row",''+this.currentRow.rowNum);
      this.render2.setAttribute(colElement,"col",""+(this.currentRow.colCount));
      let span =  this.render2.createElement("span");
      this.render2.addClass(span,"fieldName");
      let text = this.render2.createText(this.currentCol.label+'：');
      this.render2.appendChild(span,text);
      let input = this.render2.createElement('input');
      this.render2.setAttribute(input,"type","datetime");
      this.render2.setAttribute(input,"placeholder",this.currentCol.comment);
      this.render2.appendChild(colElement,span);
      this.render2.appendChild(colElement,input);
      this.render2.listen(colElement,"click",($event)=>{
        this.showColInfo(event,colElement);
      });
      this.render2.appendChild(this.currentRowElement,colElement);
      this.currentRow.colCount++;
      this.currentRow.cols.push(this.currentCol);
      this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    }else{
      this.addRow();
      this.addTime();
    }
  } 

  //附件
  addFile(){
    if(this.currentRowElement){
      this.currentCol = new Cols("file");
      let colElement = this.render2.createElement("div");
      this.render2.addClass(colElement,"cols");
      this.render2.setAttribute(colElement,"table",''+this.addingTable);
      this.render2.setAttribute(colElement,"row",''+this.currentRow.rowNum);
      this.render2.setAttribute(colElement,"col",""+(this.currentRow.colCount));
      let span =  this.render2.createElement("span");
      this.render2.addClass(span,"fieldName");
      let text = this.render2.createText(this.currentCol.label+'：');
      this.render2.appendChild(span,text);
      let input = this.render2.createElement('input');
      this.render2.setAttribute(input,"type","file");
      this.render2.setAttribute(input,"placeholder",this.currentCol.comment);
      this.render2.appendChild(colElement,span);
      this.render2.appendChild(colElement,input);
      this.render2.listen(colElement,"click",($event)=>{
        this.showColInfo(event,colElement);
      });

      this.render2.appendChild(this.currentRowElement,colElement);
      this.currentRow.colCount++;
      this.currentRow.cols.push(this.currentCol);
      this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    }else{
      this.addRow();
      this.addFile();
    }
  } 

  //下拉框
  addSelect(){
    if(this.currentRowElement){
      this.currentCol = new Cols("select");
      let colElement = this.render2.createElement("div");
      this.render2.addClass(colElement,"cols");
      this.render2.setAttribute(colElement,"table",''+this.addingTable);
      this.render2.setAttribute(colElement,"row",''+this.currentRow.rowNum);
      this.render2.setAttribute(colElement,"col",""+(this.currentRow.colCount));
      let span =  this.render2.createElement("span");
      this.render2.addClass(span,"fieldName");
      let text = this.render2.createText(this.currentCol.label+'：');
      this.render2.appendChild(span,text);
      let input = this.render2.createElement('select');
      this.render2.setAttribute(input,"placeholder",this.currentCol.comment);
      this.render2.appendChild(colElement,span);
      this.render2.appendChild(colElement,input);
      this.render2.listen(colElement,"click",($event)=>{
        this.showColInfo(event,colElement);
      });
      
      this.render2.appendChild(this.currentRowElement,colElement);
      this.currentRow.colCount++;
      this.currentRow.cols.push(this.currentCol);
      this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    }else{
      this.addRow();
      this.addSelect();
    }
  } 

   //多行文本
   addTextarea(){
    if(this.currentRowElement){
      this.currentCol = new Cols("textarea");
      let colElement = this.render2.createElement("div");
      this.render2.addClass(colElement,"cols");
      this.render2.setAttribute(colElement,"table",''+this.addingTable);
      this.render2.setAttribute(colElement,"row",''+this.currentRow.rowNum);
      this.render2.setAttribute(colElement,"col",""+(this.currentRow.colCount));
      let span =  this.render2.createElement("span");
      this.render2.addClass(span,"fieldName");
      let text = this.render2.createText(this.currentCol.label+'：');
      this.render2.appendChild(span,text);
      let input = this.render2.createElement('textarea');
      this.render2.setAttribute(input,"placeholder",this.currentCol.comment);
      this.render2.appendChild(colElement,span);
      this.render2.appendChild(colElement,input);
      this.render2.listen(colElement,"click",($event)=>{
        this.showColInfo(event,colElement);
      });
      
      this.render2.appendChild(this.currentRowElement,colElement);
      this.currentRow.colCount++;
      this.currentRow.cols.push(this.currentCol);
      this.currentTable.rows[this.currentRow.rowNum] = this.currentRow;
    }else{
      this.addRow();
      this.addTextarea();
    }
  } 
}
